<template>
  <el-dialog
    title="导入进度"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    width="500px"
  >
    <div class="progress-container">
      <el-progress 
        :percentage="percentage" 
        :status="progressStatus"
      />
      <div class="progress-text">
        正在处理: {{ current }}/{{ total }}
      </div>
    </div>

    <!-- 导入完成后显示结果 -->
    <div v-if="isCompleted" class="result-container">
      <div class="result-summary">
        <div class="success-count">
          成功: {{ successList.length }}
        </div>
        <div class="error-count">
          失败: {{ errorList.length }}
        </div>
      </div>

      <!-- 失败列表 -->
      <div v-if="errorList.length > 0" class="error-list">
        <div class="error-title">失败详情:</div>
        <el-table
          :data="errorList"
          border
          size="small"
          style="width: 100%"
        >
          <el-table-column prop="idCard" label="身份证号" width="180" />
          <el-table-column prop="reason" label="失败原因" />
        </el-table>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button 
        v-if="isCompleted"
        type="primary" 
        @click="handleClose"
      >确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'ImportProgressDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    total: {
      type: Number,
      default: 0
    },
    current: {
      type: Number,
      default: 0
    },
    successList: {
      type: Array,
      default: () => []
    },
    errorList: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    },
    percentage() {
      if (this.total === 0) return 0
      return Math.floor((this.current / this.total) * 100)
    },
    isCompleted() {
      return this.current === this.total && this.total > 0
    },
    progressStatus() {
      if (this.isCompleted) {
        return this.errorList.length === 0 ? 'success' : 'warning'
      }
      return ''
    }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.progress-container {
  text-align: center;
  padding: 20px 0;

  .progress-text {
    margin-top: 10px;
    color: #606266;
  }
}

.result-container {
  margin-top: 20px;
  
  .result-summary {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15px;
    
    .success-count {
      color: #67C23A;
      font-weight: bold;
    }
    
    .error-count {
      color: #F56C6C;
      font-weight: bold;
    }
  }

  .error-list {
    .error-title {
      color: #F56C6C;
      margin-bottom: 10px;
      font-weight: bold;
    }
  }
}

.dialog-footer {
  text-align: right;
}
</style> 